import React from 'react' 
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Dragger from './Dragger'//
import './css/Isosurface.css' 

class Isosurface extends React.Component {
    constructor(props) {
        super(props)
        this.state = { 
        }
    }
    config={//默认配置
        url:{
            rainIsoline:"rainIsoline",//雨量等值面
            meg:"getdescripstat",//描述语句
            rainData:"getRainAvgcount",//雨量的数据列表
            legend:'legend',//图例 
        }, 
        boxStyle:{
            backgroundColor:"rgba(0,32,88,0.8)",height:'100%',width:'100%',   
        },
        xy:{//拖动面板的位置
            rainlive:{ top:'10%',left:'10%'},
            rainmeg:{ top:'70%',right:'10%'},
            legend:{ bottom:'5%',left:'5%',height:'143px',width:'45px'},
            links:{top:'50px',left:'50px'}
        },
        addvcd:"350429",//"350121"
        Isoline:true,
        IsolineArea:true,  
        liveicon:'./assets/live.png',
        megicon:'./assets/meg.png',
        moveicon:'./assets/move.png',
        noRainicon:'./assets/norain.png', 
        clickOn:'./assets/click_active.png', //激活
        clickOff:'./assets/click_normal.png', //正常
        linkClick:() => {
            // console.log("click")
            T.do('rain_map_show')
        }
    }
    
    movexy = () =>{
        this.config.xy={
            rainlive:{ top:'10%',left:'10%'},
            rainmeg:{ top:'70%',right:'10%'},
            legend:{ bottom:'5%',left:'5%',height:'143px',width:'45px'},
            links:{top:'50px',left:'50px'}
        }
        this.setState()
    }
    componentWillMount = () => {  
           T.ajax({
	        key: 'isosurfaceConfig',
	        data: { },
	        success: (result) => { 
                if(this.config !== undefined) this.config = Object.assign(this.config,result);
                this.getData('time',{ },'getservertime');//获取系统时间  
	        }
	      });
    } 
    componentDidMount = () => {
         window.onresize = () => { 
            this.movexy()
        }
    } 

    info={
        // isoline:" ",//等值面 
        isoline:"http://47.95.1.229:8545/RainfallIsoline/Data/Distribution/Isoline/20180124114610.png",//等值面 
        legendData:[],
        rainData:[],
        megData:[],
        norain:true,
        realTime:{},
    }  

    getData = (key,par,type) =>{
         T.ajax({ 
            key: key,
            data: par,  
            f:'json',
            success:  (result) => {  
                switch(type){
                    case 'getservertime':
                            let realTime =  this.realTime(result.data);
                            this.getData(this.config.url.legend,{hours:realTime.hours},'legend')
                            let pars ={
                                start:realTime.stimeChart,
                                end:realTime.etimeChart,
                                Isoline:realTime.Isoline,
                                IsolineArea:realTime.IsolineArea,
                            }
                            this.getData(this.config.url.rainIsoline,pars,'isoline')  
                            this.getData(this.config.url.rainData,{ time:realTime.time},'rainData')  

                            let megpar = {
                                key:realTime.key,
                                addvcd:realTime.addvcd,
                                time :realTime.time
                            }
                            this.getData(this.config.url.meg,megpar,'megData')   
                    break;
                    case 'isoline':
                        this.info.isoline = result.url
                    break;
                    case 'legend': 
                        if(par.hours<=6){
                            this.info.legendData = result.data[0].data;  
                        }else if(par.hours<=12){
                            this.info.legendData = result.data[1].data;
                        }else{
                            this.info.legendData = result.data[2].data;
                        } 
                        this.setState() 
                    break;
                    case 'rainData':
                        this.info.rainData = result.data.reverse();
                        this.setState() 
                    break; 
                    case 'megData':
                        let lindex = result.data.str.indexOf('[');
                        let rindex = result.data.str.indexOf(']');
                        let rainnum = result.data.str.substring(lindex+1,rindex);
                        this.info.norain =  parseInt(rainnum)==0?true:false;
                        this.info.megData = result.data.str.replace("[","").replace("]","");
                         this.setState()  ;
                    break;
                }
            }
        });
    } 

    realTime = (data) => {   //时间和8点比较 
        // let  currentTime = new Date(); 
        let  currentTime = new Date(data); 
        let  currentTimeHours = currentTime.getHours();//用于和8点做比较
        let currentGetMinutes = currentTime.getMinutes(),//用于和0做比较
        formatCurrentTime =T.clock(currentTime).fmt('YYYY年MM月DD日 hh:mm:ss') ,//格式化时间,当前时间 2016年06月01日 16:04:08  
        formatToday = T.clock(currentTime).fmt('YYYY年MM月DD日') ,//格式化时间，今天 
        formatYesterday = T.clock(new Date(currentTime.getTime() - 3600000)).fmt('YYYY-MM-DD');//3600000ms=1h   //格式化时间，前一天  
        let  key_led = "",stime =  "";
        if (currentTimeHours > 8) {
            //9点
            //大于8点属于今天
            key_led = "today_led"; 
            stime = formatToday.replace("年", "-").replace("月", "-").replace("日", "T") + "08:00:00";  
        }
        else if (currentTimeHours < 8) {
            //7点
            //昨天的
            key_led = "yesterday_led";
            stime = formatYesterday.replace("年", "-").replace("月", "-").replace("日", "T") + "08:00:00";   
        }
        else {
            //currentTimeHours = 8
            //由于首页显示到分 so 08点00分59秒前属于昨天的  
            if (currentGetMinutes > 0) {
                //08：01之后的
                //今天
                key_led = "today_led"; 
                stime = formatToday.replace("年", "-").replace("月", "-").replace("日", "T") + "08:00:00";   
            } else {
                //08:00到08:01之间的
                //昨天的
                key_led = "yesterday_led";
                stime = formatYesterday.replace("年", "-").replace("月", "-").replace("日", "T") + "08:00:00";   
            } 
        }
         
        let etime = formatCurrentTime.replace("年", "-").replace("月", "-").replace("日", "T").replace("时", ":").replace("分", ":");   
        let time = "[" + stime + "," + etime + "]";//用于雨量数据以及雨量描述语句 后台传送时间 (2016-05-25T08:00:00,2016-05-25T14:54:34]  
        let stimeChart = stime.replace("T", " ");//雨量 等值面图 2016-05-25 08:00:00
        let etimeChart = etime.replace("T", " ");//雨量 等值面图 2016-05-25 15:16:28    
		let hours = Math.floor((new Date(etimeChart).getTime()-new Date(stimeChart).getTime()) / (  3600 * 1000));  //间隔时间 给图例使用

        let obj={
            key:key_led, 
            addvcd:this.config.addvcd, 
            time:time, 
            hours:hours,
            stimeChart:stimeChart,
            etimeChart:etimeChart,
            Isoline:this.config.Isoline,
            IsolineArea:this.config.IsolineArea,  
        }; 
        return obj;
    }
    render() {  
        let megstr = !this.info.norain? <img src={this.config.noRainicon} alt="" className="norain" />:<div   dangerouslySetInnerHTML={{__html:this.info.megData}} className='txt' />  
        return (
            <div className='isosurfaceWrap'  style={this.config.boxStyle}>
                <div className='linkicon' style={this.config.xy.links}  onClick={this.config.linkClick} >
                    <img src={this.config.clickOn} alt="" />
                </div>
                 <div className='pic'>
                     <img src={this.info.isoline} alt="" />
                 </div>
                 <ul className ='legend' style={this.config.xy.legend}>  
                     {
                         this.info.legendData.map((item,i) => {
                            return <li>  
                                <div  style={{background:item.color}}>   </div> <span>{item.num} </span>
                            </li>
                         })
                     }
                 </ul>
                <div className='bounds'  >
                    <Dragger bounds='parent' style={ this.config.xy.rainlive} > 
                        <div className="panel rainData">
                            <div className ='title'> 
                                <div style={{flex:1}}>
                                      <img src={this.config.liveicon} alt="" />
                                      今日降雨实况
                                </div>
                                <div style = {{width:'30px'}}>
                                    <img src={this.config.moveicon} alt="" /> 
                                </div>
                            </div>  
                            <ul  >
                                    {
                                        this.info.rainData.map((item,i) => {
                                            return(
                                                <li>
                                                    <span style={{flex:1}}>{item.name} ({item.level}) </span>
                                                    <span  style = {{color:item.value==0?"":"#62eb18",width:'64px'}}>{item.value}个</span>
                                                </li>
                                            )
                                        })
                                    } 
                            </ul> 
                        </div>
                    </Dragger>    
                     <Dragger bounds='parent' style={ this.config.xy.rainmeg} >
                         <div  className="panel megData">
                             <div className ='title'> 
                                <div style={{flex:1}}>
                                      <img src={this.config.megicon} alt="" />
                                      今日8点至今
                                </div>
                                <div style = {{width:'30px'}}>
                                    <img src={this.config.moveicon} alt="" /> 
                                </div>
                            </div>  
                            {megstr}
                         </div>
                    </Dragger> 
                </div> 
            </div>
        )
    }
}

export default Isosurface
